import React, { Component } from "react";
import "./item.css";

export default class Item extends Component {
  state = {
    mouseEnter: false,
  };

  mouseEvent = (mouseEnter) => {
    this.setState({ mouseEnter });
  };

  checkChange = (id, event) => {
    const isChecked = event.target.checked;
    this.props.updateHandler(id, isChecked);
  };

  deleteHandler = (id) => {
    this.props.deleteHandler(id);
  };

  render() {
    const { id, content, complete } = this.props.item;
    const { mouseEnter } = this.state;
    return (
      <li
        style={{
          backgroundColor: mouseEnter ? "pink" : "#fff",
          textDecoration: complete ? "line-through" : "none",
        }}
        className="list-item"
        onMouseEnter={() => this.mouseEvent(true)}
        onMouseLeave={() => this.mouseEvent(false)}
      >
        <div className="flex">
          <input
            type="checkbox"
            defaultChecked={complete}
            onChange={(e) => {
              this.checkChange(id, e);
            }}
          />
          <p>{content}</p>
        </div>

        <input
          type="button"
          value="删除"
          style={{ display: mouseEnter ? "block" : "none" }}
          onClick={() => {
            this.deleteHandler(id);
          }}
        />
      </li>
    );
  }
}
